<template>
    <div class="manage">
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
        >
        <!--控制是否可以看见表单-->
        <!--用户的表单信息-->
        <el-form ref="form" :rules="rules"  :model="form" label-width="80px" :inline="true">
<!--          inline行内表单-->
            <el-form-item label="姓名" prop="name">
                <el-input placeholder="请输入姓名" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-select v-model="form.sex" placeholder="请选择性别">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="出生日期" prop="birth">
                <el-date-picker
                    v-model="form.birth"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM -DD"
                    >
                    <!--控制输出格式-->
                </el-date-picker>
            </el-form-item>
            <el-form-item label="地址" prop="addr">
                <el-input placeholder="请输入地址" v-model="form.addr"></el-input>
            </el-form-item>

        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel" type="primary">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
    <div class="manage-header">
        <el-button type="primary" @click="handleAdd">
            +新增
        </el-button>
        <!--form搜索区-->
        <el-form :inline="true" :model="userForm">
            <el-form-item>
                <el-input placeholder="请输入地址" v-model="userForm.name"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>

        </el-form>
    
    </div>
    <div class="common-table">
    <el-table
          stripe=""
          height="90%"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别">
            <template slot-scope="scope">      
                <span>{{ scope.row.sex ==1 ? '男':'女' }}</span>
            </template>
<!--            这里是自定义类，通过自定义类可以获取到row,column,index,就是table内部的状态管理-->
<!--            这里是作用域插槽，相当于父组件将传递数据给子组件，父组件是el-table-column-->
            
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄">
          </el-table-column>
          <el-table-column
            prop="birth"
            label="出生日期">
          </el-table-column>
          <el-table-column
            prop="addr"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="addr"
            label="操作">
            <template slot-scope="scope">      
                <el-button type='primary' size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
    </el-table>
    <div class="pager">
            <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="handlePage">
            <!--绑定函数,使用current-change-->
            </el-pagination>
<!--      handlePage切换页面使用的函数-->
    </div>

    
    </div>
</div>
</template>
<script>
import{ getUser,addUser,editUser,delUser} from '../api'
export default {
    data() {
        return{
            dialogVisible:false,
            form:{
                name:'',
                sex:'',
                age:'',
                birth:'',
                addr:''
            },
            rules:{
                name:{
                    required:true,message:'请输入姓名'
                },
                age:{
                    required:true,message:'请输入年龄'
                },
                sex:{
                    required:true,message:'请输入年龄'
                },
                birth:{
                    required:true,message:'请输入生日'
                },
                addr:{
                    required:true,message:'请输入地址'
                }
            },
            tableData:[

            ],
           modalType:0,//0表示新增，1表示默认编辑
           total:0,//当前页面的总条数
           pageData:{//给getuser传入的参数
            page:1,
            limit:10
           },
           userForm:{
            //根据名字查询
            name:''
           }
        }
        
    },
    methods:{
        //提交用户表单
        submit(){
            this.$refs.form.validate((valid) =>{
                console.log(valid,'valid')
                if(valid){
                    if(this.modalType === 0){
                        addUser(this.form).then(() =>{
                            //重新获取列表的结果
                            this.getList()


                        })
                    }else{
                        editUser(this.form).then(() => {
                            this.getList()
                        })
                    }
                    //对表单数据的处理,完毕就关闭弹窗
                    //先对表单数据清空

                    this.$refs.form.resetFields()
                    this.dialogVisible=false

                }
            })
        },
        //弹窗关闭的时候弹窗触发
        handleClose(){
           this.$refs.form.resetFields()//清空表单数据,自带的函数
           this.dialogVisible = false//关闭表单

        },
        cancel(){
            this.handleClose()
        },
        handleEdit(row){
            this.modalType =1//判断当前是编辑的窗口
            this.dialogVisible = true
            //需要对当前数组进行深拷贝，parse对象转换为字符串,stringify对象转换为字符串
            this.form = JSON.parse(JSON.stringify(row))
          //弹窗的内容进行回显，直接修改会导致row的值也会修改，原始的数据就被修改了，需要使用深拷贝

        },
        handleDelete(row){
            
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          
        }).then(() => {
            delUser({id:row.id}).then(() => {
                this.$message({
                    //这里的箭头函数获取的this是当前函数的对象row
                type: 'success',
                message: '删除成功!'
            });
            //重新获取列表的接口,再次渲染列表
            this.getList()
        })
            
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
    
      });
    
        },
        getList(){
             //获取数据列表
        getUser({params:{...this.userForm,...this.pageData}}).then(({data}) => {
            //得到userForm里面的用户名字，根据该名字进行查询
            //传的的是params对象
            console.log(data)
            this.tableData = data.list
            this.total = data.count || 0
            //如果数据不存在就返回0，存在就返回数组的长度

        })
      


        },



        
        handleAdd(){
            this.modalType =0
            this.dialogVisible = true

        },
        //选择页码的回调函数
        handlePage(val){
            this.pageData.page = val//点击的页数赋值给page数
            this.getList()//调用方法
            //console.log(val,'val')



        },
        //列表的查询
        onSubmit(){
            this.getList()

        }
        

    },
    mounted() {
        this.getList()
      

        }

}

</script>
<style lang="less" scoped>
.manage{
    height: 90%;
    .manage-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .common-table{
        position: relative;
        height: calc(100% - 62px);//动态计算父盒子的高度
        //-62px和 - 62px不同，前者表示负
        .pager{
            position: absolute;
            bottom: 0;
            right: 20px;
            //绝对定位，相对与父元素，距离bottom为0,距离right为0


        }
    }

}
</style>